// 审批管理
<template>
    <div class="information">
        <div class="work-title">
            <div>
                <el-button size="mini" @click="backClick">返回</el-button>
            </div>
            <div>
                {{this.$route.query.titleName}} 流程设置
            </div>
            <div></div>
        </div>
        <div class="work-content">
            <div class="flow">
                <div class="flowTop">
                    默认审批流程
                </div>
                <div class="flowPerson">
                    <div>默认审批人：</div>
                    <ul>
                        <li class="flowLi" @click="approveDeleteClick(appInd)" v-for="(item,appInd) in approveList" :key="appInd">
                            <div v-if="item.profile" class="flowLiImg">
                                <img :src="item.profile" alt="">
                            </div>
                            <div v-else class="flowLiImgNo">
                                {{item.name | nameFun}}
                            </div>
                            <div class="flowLiName">
                                {{item.name}}
                            </div>
                        </li>
                        <li class="flowLi" @click="addApproveClick()">
                            <div class="addflowLi"></div>
                            <div class="flowLiName">
                                添加
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="flowPerson">
                    <div>默认抄送人：</div>
                    <ul>
                        <li class="flowLi" @click="copyListListsDeleteClick(copyInd)" v-for="(item,copyInd) in copyList" :key="copyInd">
                            <div v-if="item.profile" class="flowLiImg">
                                <img :src="item.profile" alt="">
                            </div>
                            <div v-else class="flowLiImgNo">
                                {{item.name | nameFun}}
                            </div>
                            <div class="flowLiName">
                                {{item.name}}
                            </div>
                        </li>
                        <li class="flowLi" @click="addcopyListClick">
                            <div class="addflowLi"> </div>
                            <div class="flowLiName">
                                添加
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="conditionBox">
                <div class="condition">
                    <div class="conditionTop">
                        分条件审批
                        <div class="conditionTopI">
                            i
                            <div class="conditionTopIFont">
                                <div class="conditionTopIFontsan"></div>
                                您可以为不同类型的审批配置审批人哦！
                            </div>
                        </div>
                    </div>
                    <div :class="{setCondition:!haveRequired,blueBorder:haveRequired}" @click="haveRequiredClick()">
                        新增
                    </div>
                    <div class="conditionRight">
                        根据审批条件设置审批人
                        <div class="conditionTopIs">
                            i
                            <div class="conditionTopIFonts">
                                <div class="conditionTopIFontsans"></div>
                                当员工发起审批时，根据审批内容，首先和“优先级1”的条件进行匹配。 </br>
                                如果匹配成功则审批单发送给该条件下的审批人； </br>
                                如果匹配不成功则继续进行匹配下一优先级的条件； </br>
                                都不能匹配时则审批发送给默认的审批人。
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="conditionUl">
                    <draggable v-model="conditionList" @start="drag=true" @end="drag=false" @update="datadragEnd">
                        <li class="conditionLi" v-for='(item,index) in conditionList' :key='index'>
                            <div class="listIndex">
                                <div>优先级</div>
                                <div>{{index+1}}</div>
                            </div>
                            <div class="listContent">
                                <div class="listTop">
                                    <div class="listFont">
                                        {{item.conditionDesc}}
                                    </div>
                                    <div class="listRedact" @click="redactClick(index)">
                                        编辑
                                    </div>
                                    <div class="listDelete" @click="deleteClick(index)">
                                        删除
                                    </div>
                                    <div class="listImg">
                                        <div class="listImgFont">
                                            <div class="listImgFontsan"></div>
                                            上下拖动可调整优先级
                                        </div>
                                        <img src="/static/img/drag.png" alt="">
                                    </div>
                                </div>
                                <div class="listPerson">
                                    <div class="listPersonTop">
                                        审批人
                                    </div>
                                    <div class="flowLi" v-for="(iten,appInd) in item.approverList" :key="appInd">
                                        <div v-if="iten.profile" class="flowLiImg">
                                            <img :src="iten.profile" alt="">
                                        </div>
                                        <div v-else class="flowLiImgNo">
                                            {{iten.name | nameFun}}
                                        </div>
                                        <div class="flowLiName">
                                            {{iten.name}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </draggable>
                </ul>
            </div>
            <div class="addBut">
                <el-button type="primary" size="medium" @click="addClick">保存</el-button>
            </div>
        </div>
        <!-- 新增默认抄送人列表 -->
        <v-addPelete :isupdatePop="copyListShow" @affirm="copyAddClick" @cancel="copyCancelClick" :userselectpop="copyLists"></v-addPelete>
        <!-- 新增默认审批人列表 -->
        <v-addPeletes :isupdatePop="approveListShow" @affirm="approveAddClick" @cancel="approveCancelClick" :userselectpop="approveLists"></v-addPeletes>
        <!-- 删除询问框 -->
        <div class="deleteBox" v-show='deleteBoxShow'>
            <div class="deletekuang">
                <div class="deleteTop">
                    确定要删除此审批条件？
                </div>
                <div class="deleteButton">
                    <el-button type="primary" size="medium" @click="deleteOkClick">确认</el-button>
                    <el-button type="primary" size="medium" @click="deleteCancelClick">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapActions } from "vuex";
    import addPeletes from "../../cModel/addressPelete.vue";
    import addPelete from "../../cModel/addPelete.vue";
    import draggable from "vuedraggable";
    var mainOverflow = document.getElementById("mainOverflow");
    export default {
        components: {
            draggable,
            "v-addPelete": addPelete,
            "v-addPeletes": addPeletes
        },
        data() {
            return {
                copyList: [], // 抄送展示人列表
                copyListShow: false, // 选择抄送人弹出框
                copyLists: [], // 已有默认抄送人ids
                approveList: [], // 审批人列表
                approveListShow: false, // 选择审批人弹出框
                approveLists: [], //已有审批人列表
                haveRequired: false,
                conditionList: [], //审批条件列表
                deleteBoxShow: false, //删除弹出框
                conditionId: "" //删除审批条件的id
            };
        },
        filters: {
            nameFun: function (val) {
                if (val) {
                    if (val.length > 2) {
                        return val.slice(val.length - 2);
                    } else {
                        return val;
                    }
                }
            }
        },
        created: function () {
            var self = this;
            if (this.$route.query.haveRequired == "true") {
                this.haveRequired = true;
            } else {
                this.haveRequired = false;
            }
            var accessToken = sessionStorage.getItem("accessToken");
            if (accessToken) {
                self
                    .getapprovalsetgetdefaultprocess({
                        modelId: self.$route.query.modelId
                    })
                    .then(data => {
                        if (data.statusCode == 200) {
                            if (data.data) {
                                if (data.data.approvers) {
                                    self.approveList = data.data.approvers;
                                }
                                if (data.data.copys) {
                                    self.copyList = data.data.copys;
                                }
                            }
                        } else if (data.statusCode == "200003") {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                            this.$router.push({
                                path: "/login"
                            });
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    })
                    .catch(msg => {
                        self.$message("服务器异常");
                    });
                self.getconditionList();
            }
        },
        methods: {
            // 获取条件列表
            getconditionList() {
                var self = this;
                self.conditionList = [];
                self
                    .getapprovalconditiongetapproverlist({
                        modelId: self.$route.query.modelId
                    })
                    .then(data => {
                        if (data.statusCode == 200) {
                            if (data.data) {
                                self.conditionList = data.data;
                            }
                        } else if (data.statusCode == "200003") {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                            this.$router.push({
                                path: "/login"
                            });
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    })
                    .catch(msg => {
                        self.$message("服务器异常");
                    });
            },
            // 添加默认抄送人
            addcopyListClick() {
                this.copyListShow = true;
                this.copyLists = this.copyList;
            },
            // 删除默认抄送人
            copyListListsDeleteClick(index) {
                var self = this;
                self.copyList.splice(index, 1);
            },
            // 添加默认抄送人确认
            copyAddClick(val) {
                this.copyList = val;
                this.copyListShow = false;
            },
            // 添加默认抄送人取消
            copyCancelClick(val) {
                this.copyListShow = false;
                this.copyList = val;
            },
            // 添加默认审批人确认
            approveAddClick(val) {
                this.approveList = val;
                this.approveListShow = false;
            },
            // 添加默认审批人取消
            approveCancelClick(val) {
                this.approveListShow = false;
                this.approveList = val;
            },
            // 添加默认审批人
            addApproveClick() {
                this.approveListShow = true;
                console.log("默认审批人", this.approveList);
                this.approveLists = this.approveList;
            },
            // 删除审批人
            approveDeleteClick(appInd) {
                this.approveList.splice(appInd, 1);
            },
            // 返回
            backClick() {
                this.$router.push({
                    path: "/home/examine"
                });
            },
            //新增
            haveRequiredClick() {
                if (this.haveRequired) {
                    this.$router.push({
                        path: "/home/setApprover",
                        query: {
                            titleName: this.$route.query.titleName,
                            modelId: this.$route.query.modelId
                        }
                    });
                } else {
                    this.$message("没有审批条件可以来设置审批人，请先设置必选选项");
                }
            },
            //编辑
            redactClick(index) {
                this.$router.push({
                    path: "/home/setApprover",
                    query: {
                        titleName: this.$route.query.titleName,
                        modelId: this.$route.query.modelId,
                        conditionId: this.conditionList[index].conditionId
                    }
                });
            },
            //删除
            deleteClick(index) {
                this.conditionId = this.conditionList[index].conditionId;
                this.deleteBoxShow = true;
                mainOverflow.style.overflowY = "hidden";
            },
            //确定删除
            deleteOkClick() {
                var self = this;
                self
                    .getapprovalsetdeleteprocess({
                        modelId: self.$route.query.modelId,
                        conditionId: self.conditionId
                    })
                    .then(data => {
                        if (data.statusCode == 200) {
                            self.getconditionList();
                            self.$message("删除成功");
                        } else if (data.statusCode == "200003") {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                            this.$router.push({
                                path: "/login"
                            });
                        } else {
                            self.$message(data.statusMessage);
                        }
                    })
                    .catch(msg => {
                        self.$message("服务器异常");
                    });
                this.deleteBoxShow = false;
                mainOverflow.style.overflowY = "auto";
            },
            //删除取消
            deleteCancelClick() {
                this.deleteBoxShow = false;
                mainOverflow.style.overflowY = "auto";
            },
            //排序
            datadragEnd() {
                var self = this;
                var arr = [];
                for (var i = self.conditionList.length; i > 0; i--) {
                    arr.push(i);
                }
                for (var i = 0; i < arr.length; i++) {
                    self.conditionList[i].sort = arr[i];
                }
                var arry = [];
                self.conditionList.forEach(function (ele, ind) {
                    arry.push({
                        sort: ele.sort,
                        conditionId: ele.conditionId
                    });
                });
                self
                    .getapprovalconditionsort({
                        modelId: self.$route.query.modelId,
                        sortArray: JSON.stringify(arry)
                    })
                    .then(data => {
                        if (data.statusCode == 200) {
                            self.$message("调整成功");
                        } else if (data.statusCode == "200003") {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                            this.$router.push({
                                path: "/login"
                            });
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    })
                    .catch(msg => {
                        self.$message("服务器异常");
                    });
            },
            // 保存
            addClick() {
                var self = this;
                var approverIdStrs = "";
                var approverIdStrsArr = [];
                if (self.approveList.length > 0) {
                    self.approveList.forEach(function (ele, ind) {
                        approverIdStrsArr.push(ele.memberId);
                    });
                    approverIdStrs = approverIdStrsArr.join(",");
                }
                var copyIdStrs = "";
                var copyIdStrsArr = [];
                if (self.copyList.length > 0) {
                    self.copyList.forEach(function (ele, ind) {
                        copyIdStrsArr.push(ele.memberId);
                    });
                    copyIdStrs = copyIdStrsArr.join(",");
                }
                self
                    .getapprovalsetupdatedefaultprocess({
                        modelId: self.$route.query.modelId,
                        approverIds: approverIdStrs,
                        copyIds: copyIdStrs
                    })
                    .then(data => {
                        if (data.statusCode == 200) {
                            this.$router.push({
                                path: "/home/examine"
                            });
                        } else if (data.statusCode == "200003") {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                            this.$router.push({
                                path: "/login"
                            });
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    })
                    .catch(msg => {
                        self.$message("服务器异常");
                    });
            },
            ...mapActions([
                "getapprovalsetupdatedefaultprocess",
                "getapprovalsetgetdefaultprocess",
                "getapprovalconditiongetapproverlist",
                "getapprovalsetdeleteprocess",
                "getapprovalconditionsort"
            ])
        },
        watch: {}
    };
</script>
<style scoped>
    .information {
        width: 100%;
        background-color: #fff;
        min-height: 600px;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        flex-wrap: wrap;
        border-radius: 5px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    }

    .work-title {
        height: 55px;
        background-color: #fff;
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .work-title>div:nth-child(1) {
        width: 58px;
        height: 26px;
        /* border: 1px solid #ebebeb; */
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        color: #333;
        line-height: 26px;
        margin-left: 15px;
        cursor: pointer;
    }

    .work-title>div:nth-child(2) {
        font-size: 14px;
        color: #333;
        margin-right: 15px;
    }

    .work-content {
        width: 100%;
        justify-content: space-between;
        overflow: hidden;
    }

    .flow {
        width: 80%;
        margin: 40px 10% 0 10%;
    }

    .flow>div {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .flowTop {
        font-size: 14px;
        color: rgb(50, 51, 52);
        width: 100%;
    }

    .flowPerson {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .flowPerson>div {
        width: 90px;
        margin-right: 10px;
        color: #999;
    }

    .flowPerson>ul {
        width: 750px;
        display: flex;
        flex-wrap: wrap;
    }

    .flowLi {
        width: 50px;
        height: 55px;
        margin: 5px 4px;
    }

    .addflowLi {
        width: 37px;
        height: 37px;
        margin: 0 auto;
        border: 1px solid #d1d1d1;
        border-radius: 100%;
        background: url("/static/img/添加.png") 50% no-repeat;
        background-size: 120%;
    }

    .flowLiImg {
        border: 1px solid #d1d1d1;
        border-radius: 100%;
        width: 37px;
        height: 37px;
        margin: 0 auto;
    }

    .flowLiImg img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }

    .flowLiName {
        width: 50px;
        height: 10px;
        font-size: 12px;
        text-align: center;
        color: #999;
    }

    .flowLiImgNo {
        border: 1px solid #d1d1d1;
        border-radius: 100%;
        width: 37px;
        height: 37px;
        margin: 0 auto;
        text-align: center;
        line-height: 37px;
        background: linear-gradient( 151.7deg,
        rgba(102, 173, 247, 1),
        rgba(67, 144, 225, 0.5));
    }

    .conditionBox {
        width: 90%;
        margin: 0 auto;
        border-top: 1px solid #d1d1d1;
        border-bottom: 1px solid #d1d1d1;
    }

    .condition {
        width: 90%;
        height: 50px;
        margin: 30px auto 10px;
        display: flex;
    }

    .conditionTop {
        width: 160px;
        height: 50px;
        line-height: 50px;
        display: flex;
    }

    .conditionTopI {
        width: 14px;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
        color: white;
        background: #aaa;
        margin: auto 10px;
        position: relative;
        border-radius: 100%;
        cursor: pointer;
    }

    .conditionTopIFont {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.75);
        width: 200px;
        letter-spacing: 2px;
        height: 36px;
        line-height: 18px;
        top: -63px;
        left: -90px;
        padding: 8px;
        border-radius: 5px;
        display: none;
    }

    .conditionTopIFontsan {
        border-top: 7px solid rgba(0, 0, 0, 0);
        border-right: 7px solid rgba(0, 0, 0, 0.75);
        border-bottom: 7px solid rgba(0, 0, 0, 0.75);
        border-left: 7px solid rgba(0, 0, 0, 0);
        position: absolute;
        bottom: -7px;
        left: 90px;
        transform: rotate(45deg);
    }

    .conditionTopI:hover>.conditionTopIFont {
        display: block;
    }

    .conditionTopIs {
        width: 14px;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
        color: white;
        background: #aaa;
        margin: auto 10px;
        position: relative;
        border-radius: 100%;
        cursor: pointer;
    }

    .conditionTopIFonts {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.75);
        width: 200px;
        letter-spacing: 2px;
        height: 163px;
        line-height: 18px;
        top: -193px;
        left: -90px;
        padding: 8px;
        border-radius: 5px;
        display: none;
        text-align: left;
    }

    .conditionTopIFontsans {
        border-top: 7px solid rgba(0, 0, 0, 0);
        border-right: 7px solid rgba(0, 0, 0, 0.75);
        border-bottom: 7px solid rgba(0, 0, 0, 0.75);
        border-left: 7px solid rgba(0, 0, 0, 0);
        position: absolute;
        bottom: -7px;
        left: 90px;
        transform: rotate(45deg);
    }

    .conditionTopIs:hover>.conditionTopIFonts {
        display: block;
    }

    .setCondition {
        width: 50px;
        height: 24px;
        letter-spacing: 3px;
        text-align: center;
        line-height: 24px;
        margin-top: 10px;
        border-radius: 4px;
        cursor: pointer;
        color: #aaa;
        border: 1px solid #aaa;
    }

    .blueBorder {
        width: 50px;
        height: 24px;
        letter-spacing: 3px;
        text-align: center;
        line-height: 24px;
        margin-top: 10px;
        border-radius: 4px;
        cursor: pointer;
        color: #49a9ee;
        border: 1px solid #49a9ee;
        border: 1px solid #49a9ee;
    }

    .conditionRight {
        width: 260px;
        height: 50px;
        line-height: 50px;
        display: flex;
        margin-left: 40px;
    }

    .conditionUl {
        width: 738px;
        margin-left: 212px;
    }

    .conditionLi {
        width: 738px;
        min-height: 130px;
        position: relative;
        border-radius: 4px;
        border: 1px solid #ebebeb;
        margin-bottom: 14px;
    }

    .listIndex {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: -60px;
        background: rgb(240, 239, 239);
    }

    .listIndex>div {
        width: 50px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #666;
    }

    .listTop {
        width: 738px;
        height: 50px;
        background: rgb(240, 239, 239);
        display: flex;
        line-height: 50px;
    }

    .listFont {
        width: 627px;
        padding: 0px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .listRedact,
    .listDelete {
        height: 50px;
        width: 32px;
        margin: 0 4px;
        cursor: pointer;
        color: #38adff;
    }

    .listImg {
        width: 30px;
        height: 50px;
        position: relative;
        font-size: 12px;
        color: white;
    }

    .listImgFont {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.75);
        width: 142px;
        letter-spacing: 2px;
        height: 18px;
        line-height: 18px;
        top: -35px;
        left: -66px;
        padding: 8px;
        border-radius: 5px;
        display: none;
    }

    .listImgFontsan {
        border-top: 7px solid rgba(0, 0, 0, 0);
        border-right: 7px solid rgba(0, 0, 0, 0.75);
        border-bottom: 7px solid rgba(0, 0, 0, 0.75);
        border-left: 7px solid rgba(0, 0, 0, 0);
        position: absolute;
        bottom: -7px;
        left: 72px;
        transform: rotate(45deg);
    }

    .listImg:hover>.listImgFont {
        display: block;
    }

    .listImg img {
        width: 24px;
        height: 24px;
        margin: 13px 3px;
    }

    .listPerson {
        display: flex;
    }

    .listPersonTop {
        width: 50px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        margin: 0 10px;
        color: #999;
    }

    .addBut {
        margin-left: 10%;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 70px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        letter-spacing: 4px;
        background: #49a9ee;
        border-radius: 4px;
        cursor: pointer;
        color: white;
    }

    .deleteBox {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.26);
        position: fixed;
        top: 0;
        left: 0;
    }

    .deletekuang {
        width: 300px;
        height: 150px;
        background: white;
        margin: 400px auto;
        border-radius: 4px;
    }

    .deleteTop {
        width: 300px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: #38adff;
        font-size: 18px;
        border-bottom: 1px solid #999;
    }

    .deleteButton {
        display: flex;
        height: 34px;
        width: 220px;
        margin: 28px auto;
    }

    .deleteButton .el-button {
        margin: 0 20px;
    }

    .buttonOk {
        border: 1px solid #38adff;
        color: #38adff;
    }

    .buttonCancel {
        border: 1px solid #999;
        color: #999;
    }
</style>